<template>
  <div class="flex flex_h_between flex_v_center" style="width: 1200px;margin: 0 auto;">
    <div class="header_title">小航家公益教育服务平台</div>
    <div class="header_wrap">
      <div class="header_item">
        <div @click="toItem('dashboard')" :class="{'active': $route.name === 'dashboard'}">网站首页</div>
        <div @click="toItem('video')" :class="{'active': $route.name === 'video'}">精彩视频</div>
        <div @click="toItem('intro')" :class="{'active': $route.name === 'intro'}">关于我们</div>
        <div @click="toItem('institution')" :class="{'active': $route.name === 'institution'}">组织机构</div>
        <div @click="toItem('member')" :class="{'active': $route.name === 'member'}">加入会员</div>
        <div @click="toItem('login')">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexHeader',
  props: ['visible'],
  components: {},
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    toItem (id) {
      if (id === 'login') {
        this.$router.push(`/user/login`)
      } else {
        this.$router.push(`/front/${id}`)
      }
    },
    confirm () {
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../styles/var.styl'
.header_title
  color #0b6cb8
  font-size 25px
  width 1200px
  margin: 0 auto;
  padding 15px
.header_wrap
  width 100%
  // background: #0b6cb8;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  position: relative;
  // z-index: 9999;
  .header_item
    display flex
    justify-content flex-end
    align-items center
    // width: 1200px;
    margin: 0 auto;
    div
      color #333
      font-weight bold
      // color #fff
      // font-size 16px
      padding 0 15px
      cursor pointer
    div.active
      color #0b6cb8
</style>
